カードカタログ風なテーブルタグ

シンプルだけど美しく紹介したいっ！

カードカタログ風なテーブルタグ

久々に、テーブルタグの小ネタ集の追加です＾＾今回は、（いや、今回も）ごくシンプルですよ～。いろいろ使いまわし出来そうな感じで考えてみましたっ。商品紹介以外にも使えるかもかも？

まずは基本形。

左記のタグです

<TABLE style="border: #f5ae0a 1px solid; " cellspacing="0" width="130"><COL span="1" align="center">
<TR><TD align="middle" height="100">
画像リンクタグ
</TD></TR>
<TR><TD align="middle" bgcolor="#fefad1" height="80">
商品名
<BR>
<FONT color="#cc0000"><B>税込
金額円</B></FONT>
</TD></TR></TABLE>

どんな感じでしょ？楽天アフィリエイトでのちっちゃめ画像でもそれなりに見栄えするかも。
レイアウトを崩さないようにするには、「商品名」は3行までにしましょう。商品名じゃなくても、簡単な説明文とかでもいいですね＾＾

横に並べてみるね。（当サイト「リビング♪」のページで使ってるよ）

画像リンクタグ

商品名
税込金額円

画像リンクタグ

商品名
税込金額円

画像リンクタグ

商品名
税込金額円

画像リンクタグ

商品名
税込金額円

上記のタグです

<TABLE cellspacing="10" cellpadding="0"><COL span="4" width="25%">
<TR><TD>
<TABLE style="border: #f5ae0a 1px solid; " cellspacing="0" width="130"><COL span="1" align="center">
<TR><TD align="middle" height="100">
画像リンクタグ
</TD></TR>
<TR><TD align="middle" bgcolor="#fefad1" height="80">
商品名
<BR>
<FONT color="#cc0000"><B>税込
金額円</B></FONT>
</TD></TR></TABLE>
</TD>
<TD>
<TABLE style="border: #f5ae0a 1px solid; " cellspacing="0" width="130"><COL span="1" align="center">
<TR><TD align="middle" height="100">
画像リンクタグ
</TD></TR>
<TR><TD align="middle" bgcolor="#fefad1" height="80">
商品名
<BR>
<FONT color="#cc0000"><B>税込
金額円</B></FONT>
</TD></TR></TABLE>
</TD>
<TD>
<TABLE style="border: #f5ae0a 1px solid; " cellspacing="0" width="130"><COL span="1" align="center">
<TR><TD align="middle" height="100">
画像リンクタグ
</TD></TR>
<TR><TD align="middle" bgcolor="#fefad1" height="80">
商品名
<BR>
<FONT color="#cc0000"><B>税込
金額円</B></FONT>
</TD></TR></TABLE>
</TD>
<TD>
<TABLE style="border: #f5ae0a 1px solid; " cellspacing="0" width="130"><COL span="1" align="center">
<TR><TD align="middle" height="100">
画像リンクタグ
</TD></TR>
<TR><TD align="middle" bgcolor="#fefad1" height="80">
商品名
<BR>
<FONT color="#cc0000"><B>税込
金額円</B></FONT>
</TD></TR></TABLE>
</TD></TR></TABLE>

カラーコード部分はお好きなカラーに変更して下さいね。（参考：カラーコード表）
テーブル枠表示の基本？！をちょちょっと勉強して、例えば商品名が入っているセルの上部を点線にすると・・・

こんな感じにも♪

収納ボックス2段（Componibili2）

税込13,125円

左記のタグです

<TABLE style="border: #f5ae0a 1px solid; " cellspacing="0" width="130"><COL span="1" align="center">
<TR><TD align="middle" height="150">
商品名
<BR><BR>
画像リンクタグ
</TD></TR>
<TR><TD style="border-top : #f5ae0a 1px dotted; align="middle" bgcolor="#fefad1" height="30">
<FONT color="#cc0000"><B>税込
金額円</B></FONT>
</TD></TR></TABLE>

値札っぽいでしょ？笑。
いろいろお試し下さいまし・・・。

ページ更新日：2004/10/02

SHOPPING MENU

HOME

リビング♪
└1万円以下のソファを探そう♪

キッチン♪
├ALESSIのキッチン小物♪
├ル・クルーゼ特集♪
└eva solo（エバソロ）

文房具♪

電化製品♪

厳選ショップ紹介♪
├【e-goods】
├【Coozee store】
├【アンジェ】
├【ノアシス】
└キッチン用品の激安デパート【厨房屋】

DESIGN MENU

テーブルタグの小ネタ集ｗ
├カラーコード表１
├カラーコード表２
├テーブル枠表示の基本？！
├切手風なテーブル♪
└カードカタログ風なテーブルタグ